<script type="text/javascript">
	Yutil.en.enhance();
</script>

<ul>
	<li>
		Make a sortable list by &lt;ul class="sortable"&gt;
	</li>
	<li>
		See source code of this page for more details
	</li>
</ul>

<hr/>

<p>Try drag around.</p>

<div style="float:left; width:12em; background:#FDD;">
	<p>Arabic numerals</p>
	<ul class="sortable">
		<li><div> 1 </div></li>
		<li><div> 2 </div></li>
		<li><div> 3 </div></li>
	</ul>
	<p></p>
</div>

<div style="float:left; width:12em; background:#DDF; margin-left:7em;">
	<p>English numerals</p>
	<ul class="sortable">
		<li><div> one </div></li>
		<li><div> two </div></li>
		<li><div> three </div></li>
	</ul>
	<p></p>
</div>

<style>
	ul.sortable			{ list-style-position:outside; list-style-type:none; }
	ul.sortable li 		{ padding:2px 5px 2px 5px; } 
	ul.sortable li div	{ background:#FFF; border:solid 1px #888; } 
</style>

<%@ page contentType="text/html;charset=UTF-8" buffer="none" %>